<template>
	<view v-if="refundData">
		<view class="edgeInsetTop"></view>
		<view class="wanl-refund"> 
			<view class="header">
				<image :src="$wanlshop.appstc('/order/img_detail_bg.png')" class="img-bg"></image>
				<view class="content">
					<view>
						<view class="status-text">{{refundData.status_text}}</view>
						<view class="reason">
							<text class="reason-text">{{refundData.is_transfer_text}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white padding-bj">
				{{getStateInfo(refundData.status)}}
			</view>
			
			<view class="bg-white current margin-top-bj">
				<view class="bg-white padding-bj current">
					<view class="wanl-gray text-sm">
						<view v-if="refundData.status == 1">
							<text class="wlIcon-dot margin-right-sm"></text>客服正在审核退款详情及退款历史记录
						</view>
						<view class="margin-top-xs" v-if="refundData.status == 1">
							<text class="wlIcon-dot margin-right-sm"></text>大概1-3个工作日做出答复，请耐心等待
						</view>
						<view class="margin-top-xs">
							<text class="wlIcon-dot margin-right-sm"></text>如果退款被拒绝，您可以修改申请重新发起
						</view>
						<view class="margin-top-xs">
							<text class="wlIcon-dot margin-right-sm"></text>卖家超时未处理，系统将自动确认
						</view>
					</view>
				</view>
			</view>
			
			<view class="bg-white padding-bj current margin-top-bj" v-if="refundData.status == 3">
				<view class="text-sm">
					拒绝理由：<text class="wanl-gray">{{refundData.admin_reason}}</text>
				</view>
				<view class="flex justify-end margin-top">
					<button class="cu-btn line-orange margin-left-xs" @tap="editRefund(refundData.id)">修改申请</button>
				</view>
			</view>
			<view class="padding-bj flex bg-white margin-tb-bj">
				<view class="cu-avatar xl margin-right-bj" :style="{backgroundImage: 'url('+$wanlshop.oss(refundData.goods[0].image, 70, 70)+')'}"> </view>
				<view class="text-sm" style="width: calc(100% - 128rpx);">
					<view class="margin-bottom-xs">
						
						<view class="text-cut-2">
							<view class="cu-tag sm margin-right-xs bg-gradual-orange radius">
								<text>{{refundData.order_type_text}}</text>
							</view>
							{{refundData.goods[0].name}}
						</view>
					</view>
					<view class="wanl-gray">
						价格：¥{{refundData.goods[0].price}}
					</view>
				</view>
			</view>
			<view class="bg-white padding-bj margin-top-bj">
				退款详情
			</view>
			<view class="bg-white padding-lr-bj padding-bottom-bj text-sm">
				<view class="item flex">
					<text class="wanl-gray"> 订单类型： </text> <text> {{refundData.order_type_text}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> 退款原因： </text> <text> {{refundData.user_reason_text}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> 退款金额： </text> <text class="text-price"> {{refundData.refund_money}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> 退款方式： </text> <text> {{refundData.pay_type_text}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> 退款时间： </text> <text> {{refundData.createtime_text}} </text>
				</view>
			</view>
			<view class="edgeInsetBottom"> </view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 退款状态，'1' => '退款申请成功', '2' => '退款完成', '3' => '驳回退款'
			refundData: null,
			returnData:{
				id: 0,
				express_no: '',
				express_name: ''
			},
			kuaidiKey: -1
		};
	},
	onLoad(option) {
		this.loadData({id:option.id});
	},
	methods: {
		async loadData(data) {
			await uni.request({
				url: '/member/refund/detail',
				method:"POST",
				data: {
					refund_sn: data.id
				},
				success: res => {
					console.log(res.data)
					this.refundData = res.data;
				}
			});
		},
		getStateInfo(state){
			return [
				"您已成功发起退款，等待平台处理", 
				"退款完成，您支付的金额已原路返回",
				"平台已驳回退款"
			][state - 1];
		},
		// 退款历史
		refundLog(id){
			this.$wanlshop.to(`/pages/user/refund/log?id=${id}`);
		},
		// 修改退款
		editRefund(id){
			this.$wanlshop.to(`/pages/user/refund/edit?id=${id}`);
		}
		
	}
};
</script>

<style>
	.wanl-refund .header {
		width: 100%;
		height: 180rpx;
		position: relative;
		background-color: #f72b36;
	}
	
	.wanl-refund .header .img-bg {
		width: 100%;
		height: 180rpx;
	}
	
	.wanl-refund .header .content {
		width: 100%;
		height: 180rpx;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 60rpx;
		box-sizing: border-box;
	}
	
	.wanl-refund .header .status-text {
		font-size: 34rpx;
		line-height: 34rpx;
		color: #FEFEFE;
	}
	
	.wanl-refund .header .reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}
	
	.wanl-refund .header .reason-text {
		padding-right: 12rpx;
	}
	
	.wanl-refund .header .status-img {
		width: 100rpx;
		height: 100rpx;
		display: block;
	}
	
	.wanl-refund .current .cu-btn{
		width: 140rpx;
		font-size: 26rpx;
		padding: 0 12rpx;
	}
	.wanl-refund .receipt{
		display: flex;
		align-items: center;
	}
	
	.wanl-refund .receipt .icon{
		margin-right: 25rpx;
		font-weight: bold;
	}
	.wanl-refund .receipt .content{
		flex: 1;
	}
	
	.wanl-refund .cu-form-group .title{
		padding-right: 25rpx;
		font-size: 28rpx;
		height: 55rpx;
		line-height: 55rpx;
	}
	.wanl-refund .cu-form-group input{
		font-size: 28rpx;
		color: #555;
		padding-right: 10rpx;
	}
	
	
</style>
